<template>
  <a-card :bordered="false" :loading="loading">
    <div class="w-full">
      <a-form :model="detailData" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="昵称" name="nickname">
              <a-input v-model:value="detailData.nickname" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="头像" name="avatar">
              <upload-image
                :image-str="detailData.avatar"
                :component-props="{ maxCount: 1, disabled: true }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="手机号" name="mobile">
              <a-input v-model:value="detailData.mobile" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="邮箱" name="email">
              <a-input v-model:value="detailData.email" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="性别" name="sex">
              <a-select
                v-model:value="detailData.sex"
                class="min-w-150px"
                allow-clear
                :options="genderList"
                placeholder="请选择性别"
                disabled
              ></a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="年龄" name="age">
              <a-input v-model:value="detailData.age" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="介绍" name="auditRemark">
              <a-textarea v-model:value="detailData.introduce" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="所在地" name="address">
              <a-input v-model:value="detailData.address" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="最后登录IP" name="lastIp">
              <a-input v-model:value="detailData.lastIp" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="最后登录时间" name="lastTime">
              <a-date-picker
                :value="formatToDateTime(detailData.lastTime, format)"
                :value-format="format"
                :format="format"
                show-time
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="注册IP" name="createIp">
              <a-input v-model:value="detailData.createIp" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="创建时间" name="createTime">
              <a-date-picker
                :value="formatToDateTime(detailData.createTime, format)"
                :value-format="format"
                :format="format"
                show-time
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item :wrapper-col="{ span: 24 }">
          <div class="text-center">
            <a-button @click="closeTab">返回</a-button>
          </div>
        </a-form-item>
      </a-form>
    </div>
  </a-card>
</template>

<script setup lang="tsx">
  import { message } from 'ant-design-vue';
  import { userApi, createUser, updateUser } from '@/api/member';
  import useRequestDetail from '@/hooks/useRequestDetail';
  import { useTabsViewStore } from '@/store/modules/tabsView';
  import { formatToDateTime } from '@/utils/dateUtil';
  import { genderList } from '@/enums/userUpdateEnum';

  defineOptions({
    name: 'memberDetail',
  });

  const format = 'YYYY-MM-DD HH:mm';
  const route = useRoute();
  const tabsViewStore = useTabsViewStore();
  const { detailData, loading } = useRequestDetail({
    apiKey: userApi.userDetail,
    initParams: route?.query,
    isMount: !!Object.values(route?.query).length && !!Object.values(route?.query)[0],
  });
  const submitForm = async (params) => {
    const userId = route?.query?.id;
    const res = userId
      ? await updateUser({
          ...params,
          id: userId,
        })
      : await createUser(params);
    if (res) {
      message.success(res?.msg);
      closeTab();
    }
  };

  const closeTab = () => {
    tabsViewStore.closeCurrentTab(route);
  };
</script>

<style></style>
